<template>
  <div id="mars3dContainer" class="mars3d-container">
    <Waring v-if="isWaring" :content="content" @close="isWaring = false" />
  </div>
  <MapVideoBox
    ref="videoBox"
    v-show="vedioBoxShow"
    @closeVideoClick="vedioBoxShow = false"
    :yzdList="yzdList"
    :ydbId="ydbId"
    :ydbType="ydbType"
    :newData="newData"
  ></MapVideoBox>
  <el-dialog
    class="my-dialog"
    :modal="false"
    v-model="dialogVisible"
    title="提示"
    width="500"
  >
    <span>自动位移数据发生急剧变化，可能发生管涌，请及时到现场进行查看。</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="confirm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
  <chart-dialog
    v-if="showChartDialog"
    :type="'4'"
    @closeChartDialog="showChartDialog = false"
  />

  <info-dialog
    v-if="showInfoDialog"
    :titleName="titleName"
    :titleType="titleType"
    @closeChartDialog="showInfoDialog = false"
    @changeTitle="onTitleChange"
  >
    <template #default v-if="titleName.indexOf('救援队伍') != -1">
      <br />
      <div>队伍人数：<span class="import-txt">30</span></div>
      <br />
      <div>具体负责人：<span class="import-txt">张峰军</span></div>
      <div>联系方式：<span class="import-txt">18435748848</span></div>
    </template>
    <template #default v-if="titleName.indexOf('避灾点') != -1">
      <div v-if="titleType == '1'">
        <br />
        <div>可安置人数：<span class="import-txt">100</span></div>
        <br />
        <div>支部书记（村委主任）<span class="import-txt">张峰军</span></div>
        <div>联系方式：<span class="import-txt">18435748848</span></div>
        <br />
        <div>具体负责人：<span class="import-txt">张峰军</span></div>
        <div>联系方式：<span class="import-txt">18435748848</span></div>
      </div>
      <div v-if="titleType == '2'">
        <br />
        <div class="wzDiv">
          <div>对讲机：<span class="import-txt">20个</span></div>
          <div>哨子：<span class="import-txt">20个</span></div>
          <div>扩音器：<span class="import-txt">10个</span></div>
          <div>手电筒：<span class="import-txt">30个</span></div>
          <div>应急照明灯：<span class="import-txt">10个</span></div>
          <div>救生衣：<span class="import-txt">50件</span></div>
          <div>雨衣：<span class="import-txt">50件</span></div>
          <div>雨靴：<span class="import-txt">60双</span></div>
          <div>救生圈：<span class="import-txt">20个</span></div>
          <div>迷彩鞋服：<span class="import-txt">60件</span></div>
          <div>铁锹：<span class="import-txt">100个</span></div>
          <div>铁镐：<span class="import-txt">80个</span></div>
          <div>头灯：<span class="import-txt">80个</span></div>
          <div>头盔:<span class="import-txt">120个</span></div>
          <div>彩条布：<span class="import-txt">80件</span></div>
          <div>架子车：<span class="import-txt">5个</span></div>
          <div>急救箱：<span class="import-txt">30个</span></div>
          <div>水泵：<span class="import-txt">10个</span></div>
        </div>
      </div>
    </template>
  </info-dialog>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import MapVideoBox from "./MapVideoBox.vue";
import chartDialog from "../../components/chart-dialog/index.vue";
import infoDialog from "../../components/info-dialog/index.vue";
import { getLoginApi, getyzdList, vedio } from "../../api/index.ts";
import Waring from "./waring.vue";
import * as mars3d from "mars3d";
import { Cesium } from "mars3d";
import { useStore } from "../../store/index.ts";
import { ElMessage } from "element-plus";
const store = useStore();
let map: any = null;
let graphicLayer: any = null;
//模型
let tiles3dLayer: any = null;
let kmlLayer: any = null;
const isWaring = ref(false);
const content = ref("预计5小时后达到!");
const videoBox = ref();

const vedioBoxShow = ref(false);
const dialogVisible = ref(false);
// 位移过程线
const showChartDialog = ref(false);

const showInfoDialog = ref(false);
const titleName = ref("");
let yzdList: any = [];
let ydbId: any = "240";
let ydbType: any = "1";
let newData: any = {
  name: "杨家门",
  city: "山西省,运城市,盐湖区",
  ydbmc: "杨家门",
  videoDeviceId: "abbf2baa66584f42bd720e0dded4b133",
  ydbszx: "盐湖区",
};
let videoInfo: any = {
  show: false,
  url: "",
  msg: "视频暂未配置",
  type: "",
};
onMounted(() => {
  getLoginApi({ username: "admin", password: "Ydb_01@hzy!" })
    .then((res: any) => {
      var data = res.data;
      if (data.code == 200) {
        sessionStorage.setItem("token", data.data.token);
        getVideoData();
        getyzd();
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
  initMap();
});

watch(
  () => store.showIsBZLX,
  (newVal: boolean) => {
    if (newVal) {
      showBZLX();
    }
  }
);
let titleType = ref("1");
const onTitleChange = (val: string) => {
  titleType.value = val;
};
const showBZLX = () => {
  addgraphic(
    [110.9962833631, 35.3001390075, 609.7],
    "icon-bzd.png",
    "避灾点",
    true
  );
  addgraphic(
    [110.995484, 35.300625, 612.9],
    "icon-rescue-team.png",
    "救援队伍",
    true
  );
  // addgraphic([110.992986, 35.291492, 564.3], "icon-bzd.png", "避灾点", true);
  // addgraphic(
  //   [110.996447, 35.28611, 563.6],
  //   "icon-rescue-team.png",
  //   "救援队伍",
  //   true
  // );
  // const positions = [
  //   [110.992593, 35.288813, 541.9],
  //   [110.992436, 35.288865, 536.7],
  //   [110.992322, 35.288928, 535.3],
  //   // [110.992261, 35.288983, 543.6],
  //   // [110.992198, 35.289082, 552.2],
  //   [110.992079, 35.28921, 547.4],
  //   [110.992238, 35.289264, 548.9],
  //   [110.992376, 35.289269, 550.3],
  //   [110.992456, 35.289326, 551.3],
  //   [110.992487, 35.289403, 551.9],
  //   [110.992467, 35.289537, 553.1],
  //   [110.992466, 35.289964, 557.1],
  //   [110.992499, 35.290184, 558.5],
  //   [110.992495, 35.290368, 559.7],
  //   [110.992579, 35.290633, 561.8],
  //   [110.992684, 35.290696, 562.9],
  //   [110.99292, 35.29075, 565.7],
  //   [110.993019, 35.290742, 566.8],
  //   [110.993306, 35.290751, 569.7],
  //   [110.993349, 35.290782, 570.4],
  //   [110.993335, 35.290823, 568.9],
  //   [110.993332, 35.29091, 563.7],
  //   [110.993306, 35.290912, 567.2],
  //   [110.993256, 35.291044, 569.2],
  //   [110.993078, 35.291321, 559.3],
  //   [110.993021, 35.291396, 559.2],
  //   [110.992977, 35.291474, 559.2],
  //   [110.992986, 35.291492, 559.3],
  // ];
  // const positions = [
  //   [110.994821, 35.299578, 610.8],
  //   [110.994948, 35.299754, 611.0],
  //   [110.995129, 35.300021, 611.7],
  //   [110.995163, 35.300155, 612],
  //   [110.995729, 35.299973, 611.1],
  //   [110.995909, 35.299931, 610.2],
  //   [110.9962833631, 35.3001390075, 609.7],
  // ];
  // const positions1 = [
  //   [110.995531171, 35.298064819, 637.7920628563],
  //   [110.9952460624, 35.2987646925, 638.3383235075],
  //   [110.994885097, 35.2995707677, 637.9121222328],
  //   [110.9952009695, 35.2999721291, 639.9984370517],
  //   [110.9953250236, 35.3002038975, 640.0305863908],
  //   [110.9956041669, 35.300050007, 640.8660257412],
  //   [110.9959789419, 35.2999779282, 638.5917718587],
  //   [110.9961196273, 35.2999665588, 637.6642953139],
  //   [110.9962396619, 35.3000977038, 636.9817922451],
  // ];
  // getLine(positions1);

  // const positions2 = [
  //   [110.9936615019, 35.3021955673, 643.9182325313],
  //   [110.9940719245, 35.3014882219, 643.4251618991],
  //   [110.9943726237, 35.3006939949, 638.0158165032],
  //   [110.9953230831, 35.3002071405, 640.0269711483]
  // ];
  // getLine(positions2);

  // const positions3 = [
  //   [110.9975628839, 35.2980755376, 620.7174676908],
  //   [110.9975144298, 35.298230022, 621.2502130019],
  //   [110.9969636573, 35.2992583012, 627.0277451565],
  //   [110.9963355417, 35.2998078931, 635.8566187061],
  //   [110.9961202408, 35.2999624965, 637.6615047222]
  // ];
  // getLine(positions3);

  // const positions4 = [
  //   [110.9955790882, 35.3019281903, 656.1342738336],
  //   [110.9958576637, 35.3017553485, 653.3583699958],
  //   [110.9959894424, 35.3016284711, 651.4764741873],
  //   [110.9960112905, 35.3015318855, 650.2100481307],
  //   [110.9958700826, 35.301404684, 649.0505616097],
  //   [110.9956675961, 35.3012664647, 648.0527924169],
  //   [110.9956509438, 35.3011256442, 646.4725816278],
  //   [110.9958323475, 35.3009206947, 643.6732910303],
  //   [110.995877181, 35.3007867713, 642.1057896037],
  //   [110.9957426465, 35.300630719, 641.0512067312],
  //   [110.9953190353, 35.3003072154, 639.8272449961],
  //   [110.9953204725, 35.3002047047, 640.0558898179],
  // ];
  // getLine(positions4);

  // const positions5 =
  //   [[110.9966305703, 35.3010224539, 643.3142740941],
  //   [110.9963070882, 35.3012355346, 645.7140569249],
  //   [110.9961382352, 35.3013384482, 647.3831229191],
  //   [110.9959971397, 35.3012948156, 647.2944289008],
  //   [110.9958661595, 35.3013890645, 648.8814483359]];
  // getLine(positions5);

  // const positions6 =
  //   [[110.9973484492, 35.3001175492, 631.5508705722],
  //   [110.9970916997, 35.3001908151, 632.8000310007],
  //   [110.9968301078, 35.3003931275, 635.1481644018],
  //   [110.9964551411, 35.3006642082, 639.0362316761],
  //   [110.9962846861, 35.3005800329, 638.3510614643],
  //   [110.9960790656, 35.3005237268, 638.5154059567],
  //   [110.9959463161, 35.3005543396, 639.4078308698],
  //   [110.995787728, 35.3006553161, 641.1179906754]];
  // getLine(positions6);

  // const positions7 =
  //   [[110.9972235951, 35.299907271, 629.5077738985],
  //   [110.996736257, 35.2994709466, 631.1744343331]];
  // getLine(positions7);

  // const positions8 =
  //   [[110.9976889704, 35.299484244, 624.1322209667],
  //   [110.9977128301, 35.2993971759, 623.4780288562],
  //   [110.9974188973, 35.2991791706, 623.4815933006],
  //   [110.9972933926, 35.2990866098, 623.853633224],
  //   [110.997241396, 35.2990837802, 624.225870301],
  //   [110.9969895335, 35.2992416532, 626.7825368941]];
  // getLine(positions8);

  // const positions9 =
  //   [[110.9992520238, 35.2990469204, 619.9192233486],
  //   [110.9992873123, 35.2989335884, 618.9153065849],
  //   [110.9990892256, 35.2988537871, 617.704223698],
  //   [110.9989130606, 35.2987555019, 616.5977209629],
  //   [110.998825506, 35.2987577024, 616.7089734795],
  //   [110.9986511935, 35.2988476218, 617.6573671335],
  //   [110.9984178074, 35.2988610493, 617.9205012936],
  //   [110.9982990457, 35.2989020987, 618.3125036582],
  //   [110.9981077859, 35.2990755545, 620.0691677751],
  //   [110.9980266237, 35.2990687099, 620.2322127344],
  //   [110.9976496311, 35.2987549052, 620.0712952083],
  //   [110.9975762859, 35.2987903352, 620.853939293],
  //   [110.997372126, 35.2989943505, 623.242828357],
  //   [110.9972827781, 35.2990815319, 623.9469533795]];
  // getLine(positions9);
};

const getLine = (positions: any) => {
  for (let i = 0; i < positions.length; i++) {
    const ipos = positions[i];
    ipos[2] += 8;
  }
  const graphic = new mars3d.graphic.PolylineEntity({
    positions,
    style: {
      width: 50,
      materialType: mars3d.MaterialType.LineFlow,
      clampToGround: true,
      materialOptions: {
        color: "yellow",
        repeat: new mars3d.Cesium.Cartesian2(8.0, 2.5),
        image: "img/marker/line-arrow-blue.png",
        speed: 10,
      },
    },
    flyTo: true,
    flyToOptions: {
      radius: 250,
      scale: 3,
      heading: 35.6,
      pitch: -45.2,
    },
  });
  graphicLayer.addGraphic(graphic);
  graphic.on(mars3d.EventType.load, function (event: any) {
    console.log("单击了矢量数据对象", event);
  });
};
const confirm = () => {
  dialogVisible.value = false;
  showChartDialog.value = true;
};
const getyzd = () => {
  let params = {
    id: ydbId,
    type: "1",
  };
  getyzdList(params)
    .then((res: any) => {
      if (res.data.code == 0 && res.data.data) {
        yzdList = res.data.data.list;
      }
    })
    .catch((err: any) => {
      console.error("获取预报数据错误", err);
    });
};
const getVideoData = () => {
  vedio(newData.videoDeviceId)
    .then((res: any) => {
      debugger;
      if (res.data.code == 0) {
        let url = res.data.data.url;
        if (url.indexOf(".m3u8") != -1) {
          videoInfo = { show: true, url: url, msg: "", type: "m3u8" };
        } else if (url.indexOf(".flv") != -1) {
          videoInfo = { show: true, url: url, msg: "", type: "flv" };
        }
      } else if (res.data.code == 200) {
        let url = res.data.data.url;
        if (url.indexOf(".m3u8") != -1) {
          videoInfo = { show: true, url: url, msg: "", type: "m3u8" };
        } else if (url.indexOf(".flv") != -1) {
          videoInfo = { show: true, url: url, msg: "", type: "flv" };
        }
      } else {
        videoInfo = {
          show: false,
          url: res.data.data,
          msg: res.data.msg,
        };
      }
    })
    .catch((err: any) => {
      console.log("getVedioErr", err);
    });
};
const showVideo = () => {
  let damName = newData.name;
  let cityName = newData.city;
  let videoDeviceId = newData.videoDeviceId;
  vedioBoxShow.value = true;
  if (videoInfo.type == "flv") {
    videoBox.value.renderVideo(videoInfo.url, damName, cityName, videoDeviceId);
  } else if (videoInfo.type == "m3u8") {
    videoBox.value.hlsVedioOpen(
      videoInfo.url,
      damName,
      cityName,
      videoDeviceId
    );
  }
};
const initMap = () => {
  const configUrl = "config/config.json";
  mars3d.Util.fetchJson({ url: configUrl }).then((data: any) => {
    let obj = data.map3d;
    initMars3d(obj);
  });
};
//地图添加图层
const initMars3d = (option: any) => {
  map = new mars3d.Map("mars3dContainer", option);
  // 针对不同终端的优化配置
  if (mars3d.Util.isPCBroswer()) {
    map.zoomFactor = 2.0; // 鼠标滚轮放大的步长参数

    // IE浏览器优化
    if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
      map.viewer.targetFrameRate = 20; // 限制帧率
      map.scene.requestRenderMode = false; // 取消实时渲染
    }
  } else {
    map.zoomFactor = 5.0; // 鼠标滚轮放大的步长参数

    // 移动设备上禁掉以下几个选项，可以相对更加流畅
    map.scene.requestRenderMode = false; // 取消实时渲染
    map.scene.fog.enabled = false;
    map.scene.skyAtmosphere.show = false;
    map.scene.globe.showGroundAtmosphere = false;
  }

  // //二三维切换不用动画
  if (map.viewer.sceneModePicker) {
    map.viewer.sceneModePicker.viewModel.duration = 0.0;
  }
  // unBindMapDemo();
  graphicLayer = new mars3d.layer.GraphicLayer();
  map.addLayer(graphicLayer);
  load3dTilesetLayer();

  // showBZLX();
};
//禁用右键菜单
const unBindMapDemo = () => {
  map.unbindContextMenu();
};
//清除模型
const removeTiles3dLayer = () => {
  if (tiles3dLayer) {
    tiles3dLayer.clear();
    map.removeLayer(tiles3dLayer, true);
    tiles3dLayer = null;
  }
};
const removeKmlLayer = (nowIndex: number) => {
  const allLayers = map.getLayers();
  console.log(allLayers);
  allLayers.forEach((item: any) => {
    if (typeof item.id == "string") {
      if (item.id.indexOf("&-") > -1) {
        var arr = item.id.split("&-");
        if (arr[1] < nowIndex) {
          map.removeLayer(item._events);
        }
      }
    }
  });
};
const getKml = (name: string, index: number) => {
  // @ts-ignore
  if (
    index == 5 ||
    index == 10 ||
    index == 15 ||
    index == 20 ||
    index == 25 ||
    index == 30
  ) {
    removeKmlLayer(index + 1);
  }
  const url = "http://192.168.5.78:8000/" + name + ".kml";
  kmlLayer = new mars3d.layer.KmlLayer({
    url: url,
    id: "KmlLayer&-" + index,
    symbol: {
      styleOptions: {
        width: 5,
        materialType: mars3d.MaterialType.Water,
        materialOptions: {
          height: 3, // 水面高度
          normalMap: "/img/textures/waterNormals.jpg", // 水正常扰动的法线图
          frequency: 8000.0, // 控制波数的数字。
          animationSpeed: 0.02, // 控制水的动画速度的数字。
          amplitude: 5.0, // 控制水波振幅的数字。
          specularIntensity: 0.8, // 控制镜面反射强度的数字。
          baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
          blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
          opacity: 0.7, // 透明度
        },
        clampToGround: true,
        flyTo: true,
      },
    },
  });
  map.addLayer(kmlLayer);

  kmlLayer.on(mars3d.EventType.load, function (event: any) {
    console.log("矢量数据对象加载完成", event);
    if (index == 0) {
      setTimeout(() => {
        ElMessage({
          message: "预计3小时后达到！",
          type: "warning",
        });
      }, 5000);
    }
    if (index == 31) {
      setTimeout(() => {
        ElMessage({
          message: "预计5小时后达到！",
          type: "warning",
        });
      }, 15000);
    }
  });
};
function load3dTilesetLayer() {
  removeTiles3dLayer();
  tiles3dLayer = new mars3d.layer.TilesetLayer({
    url: "http://192.168.5.8:9091/tileset.json", // url: import.meta.env.VITE_FILE_URL + url + "/tileset.json",
    flyTo: true,
    flyToOptions: {
      // radius: 1000,
      scale: 1.5,
      heading: 0,
      pitch: -90,
    },
    maximumScreenSpaceError: 16, // 【重要】数值加大，能让最终成像变模糊
    maximumMemoryUsage: 1024, // 【重要】内存建议显存大小的50%左右，内存分配变小有利于倾斜摄影数据回收，提升性能体验
    skipLevelOfDetail: true, //是Cesium在1.5x 引入的一个优化参数，这个参数在金字塔数据加载中，可以跳过一些级别，这样整体的效率会高一些，数据占用也会小一些。但是带来的异常是：1） 加载过程中闪烁，看起来像是透过去了，数据载入完成后正常。2，有些异常的面片，这个还是因为两级LOD之间数据差异较大，导致的。当这个参数设置false，两级之间的变化更平滑，不会跳跃穿透，但是清晰的数据需要更长，而且还有个致命问题，一旦某一个tile数据无法请求到或者失败，导致一直不清晰。所以我们建议：对于网络条件好，并且数据总量较小的情况下，可以设置false，提升数据显示质量。
    loadSiblings: true, // 如果为true则不会在已加载完模型后，自动从中心开始超清化模型
    cullRequestsWhileMoving: true,
    cullRequestsWhileMovingMultiplier: 10, //【重要】 值越小能够更快的剔除
    preferLeaves: true, //【重要】这个参数默认是false，同等条件下，叶子节点会优先加载。但是Cesium的tile加载优先级有很多考虑条件，这个只是其中之一，如果skipLevelOfDetail=false，这个参数几乎无意义。所以要配合skipLevelOfDetail=true来使用，此时设置preferLeaves=true。这样我们就能最快的看见符合当前视觉精度的块，对于提升大数据以及网络环境不好的前提下有一点点改善意义。
    progressiveResolutionHeightFraction: 0.5, //【重要】 数值偏于0能够让初始加载变得模糊
    dynamicScreenSpaceError: true, // true时会在真正的全屏加载完之后才清晰化模型
    preloadWhenHidden: true, //tileset.show是false时，也去预加载数据
    cullWithChildrenBounds: false,
  });
  map.addLayer(tiles3dLayer);
  tiles3dLayer.on(mars3d.EventType.load, () => {
    addEntityPoint(
      [110.990700177262, 35.3013508906325, 602.1],
      "杨家门大型坝",
      false,
      "#fcb32c"
    );
    addgraphic([110.990467, 35.301199], "icon-jz.png", "测站", true);
    addgraphic([110.990082, 35.30118, 597.8], "icon-jz.png", "基站");
    addgraphic([110.990971, 35.30138, 602.1], "icon-video.png", "视频");
    addgraphic(
      [110.990870177462, 35.3013508908325, 602.1],
      "icon-ylj.png",
      "雨量筒"
    );
    addgraphic([110.991015, 35.301694, 602.1], "icon-swj.png", "水位计", true);
    var kmlList = [
      "0030",
      "0100",
      "0130",
      "0200",
      "0230",
      "0300",
      "0330",
      "0400",
      "0420",
      "0440",
      "0500",
      "0510",
      "0520",
      "0530",
      "0540",
      "0550",
      "0600",
      "0610",
      "0620",
      "0630",
      "0640",
      "0650",
      "0700",
      "0710",
      "0720",
      "0730",
      "0740",
      "0750",
      "0800",
      "0810",
      "0820",
      "0830",
    ];
    kmlList.forEach((item: any, index: number) => {
      //  setTimeout(() => (getKml(item, index)), 3000)
    });
  });
}
const addEntityPoint = (
  position: any,
  name: string,
  clampToGround: boolean,
  color: string
) => {
  const graphic = new mars3d.graphic.PointEntity({
    position: position,
    show: true,
    style: {
      pixelSize: 8,
      color: "#ffffff",
      outline: true,
      outlineColor: "#fcb32c",
      outlineWidth: 3,
      clampToGround: clampToGround ? true : false,
      visibleDepth: false,
      label: {
        text: name,
        color: color ? "#fcb32c" : "#fff",
        font_size: 20,
        background: true,
        clampToGround: clampToGround ? true : false,
        visibleDepth: false,
        pixelOffsetY: -25,
      },
    },
  });
  graphicLayer.addGraphic(graphic);
};
const addgraphic = (
  position: any,
  imgUrl: string,
  name: string,
  clampToGround: boolean = false
) => {
  const graphic = new mars3d.graphic.PointEntity({
    position: position,
    billboard: {
      // image: "img/marker/" + imgUrl,
      image:
        ["雨量筒", "水位计", "测站"].indexOf(name) < 0
          ? "img/marker/" + imgUrl
          : twinkleEntity("img/marker/" + imgUrl),
      clampToGround: clampToGround,
      visibleDepth: false,
      scale: 0.5,
    },
    style: {
      label: {
        text: name,
        color: "#ffffff",
        font_size: 18,
        background: true,
        clampToGround: clampToGround,
        visibleDepth: false,
        pixelOffsetY: -40,
      },
    },
  });
  graphicLayer.addGraphic(graphic);

  graphic.on(mars3d.EventType.click, () => {
    if (name == "视频") {
      showVideo();
    }
    if (name == "测站") {
      showChartDialog.value = true;
    }
    if (name == "救援队伍") {
      showInfoDialog.value = true;
      titleName.value = "杨家门救援队伍";
    }

    if (name == "避灾点") {
      showInfoDialog.value = true;
      titleName.value = "杨家门避灾点";
    }
  });
};
const twinkleEntity = (image: string) => {
  return new Cesium.CallbackProperty(function () {
    let time = Cesium.JulianDate.fromDate(new Date());
    let txf = window.Math.floor(time.secondsOfDay);
    let result = null;
    if (txf % 2 != 0) {
      result = image.split(".")[0] + "-warning" + "." + image.split(".")[1];
    } else {
      result = image;
    }
    return result;
  }, false);
};
</script>

<style lang="less">
.mars3d-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // border: 1px solid aqua;
  box-sizing: border-box;
  position: relative;
}

.my-dialog {
  margin: 10px 10px 0 auto !important;
}

.import-txt {
  font-family: "PingFangBold";
  font-size: 22px;
  font-weight: bold;
}

:deep(.el-dialog) {
  margin: 10px 10px 0 auto;
}

// .title-box {
//   display: flex;
//   align-items: center;
//   line-height: 37px;
//   font-family: "PingFangBold";
//   font-size: 20px;

//   img {
//     display: block;
//     height: 35px;
//     margin-left: 1vh;
//     cursor: pointer;
//   }
// }

.wzDiv {
  display: flex;
  flex-wrap: wrap;

  div {
    width: 50%;
  }
}

.content-box {
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.content-box::-webkit-scrollbar {
  width: 0;
}
</style>
